const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader/dist');
module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'js/chunk-[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
        clean: true, // 每次构建前清理/dist文件夹
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                    },
                },
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader','less-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset',
                generator: {
                    filename: 'assets/[name][ext][query]'
                },
                parser:{
                    dataUrlCondition:{
                        maxSize: 8 * 1024 // 小于8kb的图片会转换为base64
                    }
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
            // 你可以在这里添加更多加载器配置，如处理图片、字体等
        ],
    },
    plugins:[
        // 你可以在这里添加更多插件配置
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html',
            inject: 'body'
        }),
        new VueLoaderPlugin()
    ],
    mode: 'development', // 或 'production'，根据环境设置
    devServer: {
        static: {
            directory: path.join(__dirname, 'public'), // 使用 static.directory 指定静态文件目录
        },
        compress: true,
        port: 9000,
    }
};